{extend name="../front" /}
{block name="main"}
<main class="container">
  <div class="card card-detail py-4">
    <div class="card-body">
      <h1 class="card-title">{$detail_name} <span class="badge bg-danger">私密</span></h1>
      <p class="text-muted small">{$detail_excerpt}</p>
      <form class="col-12 col-md-6 mx-auto" action="{:xfUrl('blog/detail/index')}" method="post">
        <input type="hidden" name="id" value="{$detail_id}">
        {if $detail_slide}<p><img class="img-fluid w-100" src="{$detail_slide}" alt="{$detail_name}"></p>{/if}
        <div class="alert alert-primary text-center" role="alert">
          秘密笔记需要输入密码后才能查看
        </div>
        <div class="input-group mb-4">
          <span class="input-group-text"><i class="bi-key"></i></span>
          <input class="form-control fs-0" name="password" id="password" type="text" placeholder="密码" maxlength="15" autocomplete="off" required>
        </div>
        <div class="input-group mb-4">
          <span class="input-group-text"><i class="bi-code"></i></span>
          <input class="form-control fs-0" name="captcha" id="captcha" type="text" placeholder="验证码" maxlength="4" autocomplete="off" required>
          <span class="input-group-text p-0"><img class="rounded" id="captcha-image" src="{:xfUrl('home/captcha/index')}" alt="captcha" width="88" height="40"/></span>
        </div>
        <div class="text-center">
          <button class="btn btn-dark mx-2">密码查看</button>
          {if $detail_extend['passurl']}
          <a class="btn btn-secondary mx-2" href="{$detail_extend.passurl}" target="_blank">获取密码</a>
          {/if}
        </div>
      </form>
    </div>
  </div>
</main>
{/block}